<template>
  <div>
    <div class="wallet-info">
      <div class="header">
        <div class="text">可提现账户(元)：</div>
        <div class="text big">
          <span>¥</span>{{amount}}
        </div>
      </div>
      <div class="line"></div>
      <div class="radio-group">
        <div class="title">选择到账渠道：</div>
        <div class="radio" v-for="v in radioOption" :key="v.id">
          <div class="label">
            <img :src="v.icon">
            <span>{{v.title}}</span>
          </div>
          <div class="value">
            <span>{{v.account}}</span>
            <img 
              :src="`/src/assets/icons/circle${choose === v.id ? '-success' : ''}.png`"
              @click="radioCheck(v.id, v.quoat)"
            >
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="hint">
        <p class="yellow">温馨提示：</p>
        <p>1. 每日限提现一笔</p>
        <p>2. 20:00之后的提现，算次日提现</p>
        <p>3. 当日小额提现(小于5000)：当日23点前完成打款</p>
        <p>4. 当日大额提现(大于5000)：次日23点前完成打款</p>
        <p v-if="!isFirst">5. 微信钱包提现到储蓄卡方法请参考：<a href="https://mp.weixin.qq.com/s?__biz=MzI5NzY0NDU0Nw==&mid=2247484126&idx=2&sn=dde0fd59be24e914afd593e3252e86b2&chksm=ecb0a5b2dbc72ca4f894b9e250941fbc3603d69692ea77c18c0f5712d03df50c5e7d6e7bbe76&scene=21#wechat_redirect">点这里</a></p>
        <p v-if="isFirst" class="bold">5. 用户首笔提现仅限提现到支付宝</p>
      </div>
      <div class="share-btn">
        <mt-button @click.native="withdrawDo" :disabled="isDisabled">立即提现</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'

  export default {
    name: 'WithdrawCash',
    data () {
      return {
        amount: 0,
        choose: 0,
        radioOption: [],
        isDisabled: false,
        isFirst: true
      }
    },
    methods: {
      getInfo () {
        this.$post('/vue/my/withdraw', '').then(data => {
          this.amount = data.amount
          this.choose = data.default
          this.isDisabled = data.is_disabled
          this.radioOption = data.pay
          this.isFirst = data.is_first
        })
      },
      routerWalletDetail (type) {
        this.$router.push({name: 'WalletDetail', params: {type: type}})
      },
      radioCheck (id, disabled) {
        this.choose = id
        this.isDisabled = disabled
      },
      withdrawDo () {
        let params = {pid: this.choose}
        if (this.choose === 0) {
          msg('请选择提现方式')
          return false
        }
        this.$post('/vue/my/do_withdraw', params).then(data => {
          MessageBox.alert(data).then(action => {
            if (action === 'confirm') {
              this.$router.replace({name: 'WalletDetail', params: {type: 1}})
            }
          })
        })
      }
    },
    mounted () {
      this.getInfo()
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'middle',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-yellow: rgb(245, 166, 35);

  .wallet-info {
    min-height: 100vh;
    background-color: #FFF;
    .header {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      .text {
        flex: 0 0 auto;
        font-size: 13px;
        line-height: 24px;
        color: @c-124;
        padding: 4px 0;
        &.big {
          color: @c-blue;
          font-size: 24px;
          line-height: 32px;
          span {
            font-size: 13px;
            line-height: 24px;
          }
        }
      }
    }
    .radio-group {
      padding: 12px;
      text-align: left;
      .title {
        font-size: 13px;
        font-weight: bold;
        line-height: 24px;
        color: @c-124;
      }
      .radio {
        padding: 12px 0;
        border-bottom: 1px solid @c-235;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        &:last-child {
          padding-bottom: 4px;
          border: 0;
        }
        .label {
          flex: 0 0 auto;
          img {
            margin-right: 12px;
          }
        }
        .value {
          flex: 0 0 auto;
          text-align: right;
          span {
            margin-right: 8px;
          }
        }
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
        span {
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          vertical-align: middle;
        }
      }
    }
    .hint {
      padding: 12px;
      font-size: 12px;
      text-align: left;
      .yellow {
        line-height: 24px;
        color: @c-yellow;
      }
      p {
        line-height: 20px;
        color: @c-169;
        &.bold {
          font-weight: bold;
          color: @c-124;
        }
      }
    }
    .line {
      height: 8px;
      background-color: rgb(240, 244, 247);
    }
    .share-btn {
      padding: 8px;
      border-top: 1px solid @c-226;
      position: fixed;
      width: 100%;
      bottom: 0;
      background-color: #FFF;
      img {
        width: 24px;
        height: 24px;
      }
      .mint-button {
        height: 40px;
        padding: 7px 0;
        width: 168px;
        text-align: center;
        background-color: @c-blue;
        border-radius: 20px;
        &.is-disabled {
          background-color: @c-169;
        }
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #FFF;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
</style>